const { defineConfig } = require("@vue/cli-service");
const { name } = require("./package");
const path = require("path");

const port = 6001;

const { VUE_APP_BASE_API } = process.env

module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        module: {
            rules: [
                {
                test: /\.s[ac]ss$/i, // 匹配.scss或.sass文件
                use: [
                    'style-loader', // 将JS字符串生成为style节点
                    'css-loader',   // 将CSS转化成CommonJS模块
                    'sass-loader',  // 将Sass编译成CSS
                ],
                },
            ],
        }
    },
    devServer: {
        port: port,
        headers: {
            "Access-Control-Allow-Origin": "*",
        },
        static: {
            directory: path.join(__dirname, "dist"),
            publicPath: "/dist/"  // 修改静态资源服务路径
        },
        proxy: { 
            // 配置跨域
            '/prod-api': {
                // 用.env变量配置跨越
                target: process.env.VUE_APP_BASE_API,
                ws: true,  // 是否启用websockets
                changOrigin: true,  // 开启代理，在本地创建一个虚拟服务端
                /* pathRewrite: {
                    '^/prod-api': ''
                }, */
            }
        },
    },
    publicPath: process.env.NODE_ENV === "production" 
        ? `//localhost:${port}/dist/`  // 添加dist目录
        : `//localhost:${port}/`,
    configureWebpack: {
        output: {
            publicPath: process.env.NODE_ENV === "production" 
                ? `//localhost:${port}/dist/`  // 同步添加dist
                : `//localhost:${port}/`,
            library: `${name}-[name]`,
            libraryTarget: "umd",
            chunkLoadingGlobal: `webpackJsonp_${name}`,
        },
    },
});
